<template>
  <div class="questionAssign">
    <div class="btn plain" @click="back">返回</div>
    <div class="btn primary" style="margin-top:10px;" @click="save">保存</div>
    <main>
      <div class="left">
        <div class="table-header">
          <p>已添加题目</p>
          <div class="search-bar">
            <Select
              width="115px"
              v-model="queType"
              placeholder="题目类型">
              <Option
                v-for="t of queTypes"
                :key="t.value"
                :value="t.value">
                  {{ t.label }}
              </Option>
            </Select>
            <Select
              width="115px"
              v-model="queDiff"
              placeholder="难度">
              <Option
                v-for="t of queDiffs"
                :key="t.value"
                :value="t.value">
                  {{ t.label }}
              </Option>
            </Select>
            <input type="text" v-model="queName" placeholder="题目名称">
            <div class="btn primary" @click="getInList">搜索</div>
          </div>
        </div>
        <main>
          <!-- REAL -->
          <draggable
            class="list-group"
            v-model="added"
            v-bind="dragOptions"
            v-show="!hideListTwo"
            handle=".handle"
            @remove="removed"
            @start="drag = true"
            @end="drag = false">
            <transition-group type="transition" name="flip-list">
              <div
                class="list-group-item"
                v-for="(que, index) in added"
                :key="que.id"
              >
                <i class="handle"></i>
                {{ '题号：' + index + '&nbsp;&nbsp;&nbsp;&nbsp;题目：' + que.name }}
                <a @click="showInfo(que.id)">显示详情</a>
                <transition name="slide-fade">
                  <div class="middle-container" v-show="que.id === displayId">
                    <div class="box" style="flex:1">
                      <p class="title">题目名称</p>
                      {{ que.name }}
                      <p class="title">题目描述</p>
                      {{ que.desc || '无' }}
                    </div>
                    <div class="box" v-if="que.queType !== '2'" style="flex:1">
                      <p class="title">选项</p>
                      <div class="que-container">
                        <div class="row">
                          <div class="option-container A">
                            {{ que.options.A }}
                          </div>
                          <div class="option-container B">
                            {{ que.options.B }}
                          </div>
                        </div>
                        <div class="row">
                          <div class="option-container C">
                            {{ que.options.C }}
                          </div>
                          <div class="option-container D">
                            {{ que.options.D }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="box">
                      <p class="title">题目类型</p>
                      {{ getType(que.queType) }}
                      <template v-if="que.queType !== '2'">
                        <p class="title">答案</p>
                        {{ que.queAns }}
                      </template>
                      <template v-else>
                        <p class="title">答案</p>
                        {{ que.queAns === 0 ? '正确' : '错误' }}
                      </template>
                    </div>
                  </div>
                </transition>
              </div>
            </transition-group>
          </draggable>
          <!-- FAKE -->
          <div class="list-group" v-show="hideListTwo">
            <div
              class="list-group-item"
              v-for="(que, index) in added"
              :key="que.id"
            >
              <i class="handle"></i>
              {{ '题号：' + index + '&nbsp;&nbsp;&nbsp;&nbsp;题目：' + que.name }}
              <a @click="showInfo(que.id)">显示详情</a>
            </div>
          </div>
        </main>
      </div>
      <div class="right">
        <div class="table-header">
          <p>未添加题目</p>
          <div class="search-bar">
            <Select
              width="115px"
              v-model="queTypeOut"
              placeholder="题目类型">
              <Option
                v-for="t of queTypes"
                :key="t.value"
                :value="t.value">
                  {{ t.label }}
              </Option>
            </Select>
            <Select
              width="115px"
              v-model="queDiffOut"
              placeholder="难度">
              <Option
                v-for="t of queDiffs"
                :key="t.value"
                :value="t.value">
                  {{ t.label }}
              </Option>
            </Select>
            <input type="text" placeholder="题目名称" v-model="queNameOut">
            <div class="btn primary" @click="getOutList">搜索</div>
          </div>
        </div>
        <main>
          <!-- REAL -->
          <draggable
            class="list-group"
            v-model="unadd"
            v-bind="dragOptions"
            v-show="!hideListTwo"
            handle=".handle"
            @remove="removed"
            @start="drag = true"
            @end="drag = false">
            <transition-group type="transition" name="flip-list">
              <div
                class="list-group-item"
                v-for="que in unadd"
                :key="que.id"
              >
                <i class="handle"></i>
                {{ '题目：' + que.name }}
                <a @click="showInfo(que.id)">显示详情</a>
                <transition name="slide-fade">
                  <div class="middle-container" v-show="que.id === displayId">
                    <div class="box" style="flex:1">
                      <p class="title">题目名称</p>
                      {{ que.name }}
                      <p class="title">题目描述</p>
                      {{ que.desc || '无' }}
                    </div>
                    <div class="box" v-if="que.queType !== '2'" style="flex:1">
                      <p class="title">选项</p>
                      <div class="que-container">
                        <div class="row">
                          <div class="option-container A">
                            {{ que.options.A }}
                          </div>
                          <div class="option-container B">
                            {{ que.options.B }}
                          </div>
                        </div>
                        <div class="row">
                          <div class="option-container C">
                            {{ que.options.C }}
                          </div>
                          <div class="option-container D">
                            {{ que.options.D }}
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="box" style="width:20%">
                      <p class="title">题目类型</p>
                      {{ getType(que.queType) }}
                      <template v-if="que.queType !== '2'">
                        <p class="title">答案</p>
                        {{ que.queAns }}
                      </template>
                      <template v-else>
                        <p class="title">答案</p>
                        {{ que.queAns === 0 ? '正确' : '错误' }}
                      </template>
                    </div>
                  </div>
                </transition>
              </div>
            </transition-group>
          </draggable>
          <!-- FAKE -->
          <div class="list-group" v-show="hideListTwo">
            <div
              class="list-group-item"
              v-for="que in unadd"
              :key="que.id"
            >
              <i class="handle"></i>
              {{ '题目：' + que.name }}
              <a @click="showInfo(que.id)">显示详情</a>
            </div>
          </div>
        </main>
      </div>
    </main>
  </div>
</template>
<script>
import draggable from 'vuedraggable';
import Select from '@/components/select/Select';
import Option from '@/components/select/Option';
import api from '@/api/questionAssign';

export default {
  name: 'questionAssign',
  data() {
    return {
      added: [
      ],
      unadd: [
      ],
      queTypes: [
        {
          value: 0,
          label: '单选题',
        },
        {
          value: 1,
          label: '多选题',
        },
        {
          value: 2,
          label: '判断题',
        },
      ],
      queDiffs: [
        {
          value: 0,
          label: '非常简单',
        },
        {
          value: 1,
          label: '较简单',
        },
        {
          value: 2,
          label: '普通',
        },
        {
          value: 3,
          label: '困难',
        },
        {
          value: 4,
          label: '极其困难',
        },
      ],
      queName: '',
      queType: '',
      queDiff: '',
      queNameOut: '',
      queTypeOut: '',
      queDiffOut: '',
      drag: false,
      hideListTwo: false,

      displayId: null,
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    save() {
      const param = new URLSearchParams();
      param.append('examId', this.$route.query.examId ? this.$route.query.examId : this.$route.query.dbId);
      let list = '';
      for (let i = 0; i < this.added.length; i += 1) {
        list += this.added[i].id;
        if (i !== this.added.length - 1) {
          list += ',';
        }
      }
      param.append('questionList', list);
      if (this.$route.query.examId) {
        api.changeAssign(param).then(async (res) => {
          if (res.data.code === 200) {
            this.$alert('配置成功');
            this.$router.go(-1);
          } else {
            this.$alert(res.data.message);
          }
        });
      } else {
        api.changeAssign2(param).then(async (res) => {
          if (res.data.code === 200) {
            this.$alert('配置成功');
            this.$router.go(-1);
          } else {
            this.$alert(res.data.message);
          }
        });
      }
    },
    removed() {
      this.hideListTwo = true;
      const self = this;
      this.$nextTick(() => {
        // show the real list again
        // waiting for nextTick isn't enough
        setTimeout(() => { self.hideListTwo = false; }, 100);
      });
    },
    showInfo(id) {
      if (this.displayId === id) {
        this.displayId = null;
      } else {
        this.displayId = id;
      }
    },
    getDifficulty(type) {
      switch (type) {
        case 0:
          return '非常简单';
        case 1:
          return '较简单';
        case 2:
          return '普通';
        case 3:
          return '困难';
        case 4:
          return '极其困难';
        default:
          return null;
      }
    },
    getType(type) {
      switch (type) {
        case '0':
          return '单选题';
        case '1':
          return '多选题';
        case '2':
          return '判断题';
        default:
          return null;
      }
    },
    getInList() {
      const param = new URLSearchParams();
      param.append('examId', this.$route.query.examId);
      param.append('title', this.queName);
      param.append('type', this.queType);
      param.append('level', this.queDiff);
      api.queryInBQuestions(param).then(async (res) => {
        this.added = [];
        const datas = res.data.data;
        for (let i = 0; i < datas.length; i += 1) {
          this.added.push(
            {
              id: datas[i].businessId,
              name: datas[i].title,
              desc: datas[i].description,
              queType: datas[i].type,
              queAns: datas[i].answer,
              options: {
                A: datas[i].boptionList.length !== 0 ? datas[i].boptionList[0].optionContent : '',
                B: datas[i].boptionList.length !== 0 ? datas[i].boptionList[1].optionContent : '',
                C: datas[i].boptionList.length !== 0 ? datas[i].boptionList[2].optionContent : '',
                D: datas[i].boptionList.length !== 0 ? datas[i].boptionList[3].optionContent : '',
              },
            },
          );
        }
      });
    },
    getOutList() {
      const param = new URLSearchParams();
      param.append('companyId', sessionStorage.getItem('companyId'));
      param.append('examId', this.$route.query.examId);
      param.append('title', this.queNameOut);
      param.append('type', this.queTypeOut);
      param.append('level', this.queDiffOut);
      api.queryOutBQuestions(param).then(async (res) => {
        this.unadd = [];
        const datas = res.data.data;
        for (let i = 0; i < datas.length; i += 1) {
          this.unadd.push(
            {
              id: datas[i].businessId,
              name: datas[i].title,
              desc: datas[i].description,
              queType: datas[i].type,
              queAns: datas[i].answer,
              options: {
                A: datas[i].boptionList.length !== 0 ? datas[i].boptionList[0].optionContent : '',
                B: datas[i].boptionList.length !== 0 ? datas[i].boptionList[1].optionContent : '',
                C: datas[i].boptionList.length !== 0 ? datas[i].boptionList[2].optionContent : '',
                D: datas[i].boptionList.length !== 0 ? datas[i].boptionList[3].optionContent : '',
              },
            },
          );
        }
      });
    },
    getInList2() {
      const param = new URLSearchParams();
      param.append('examId', this.$route.query.dbId);
      param.append('title', this.queName);
      param.append('type', this.queType);
      param.append('level', this.queDiff);
      api.queryInBQuestions2(param).then(async (res) => {
        this.added = [];
        const datas = res.data.data;
        for (let i = 0; i < datas.length; i += 1) {
          this.added.push(
            {
              id: datas[i].businessId,
              name: datas[i].title,
              desc: datas[i].description,
              queType: datas[i].type,
              queAns: datas[i].answer,
              options: {
                A: datas[i].boptionList.length !== 0 ? datas[i].boptionList[0].optionContent : '',
                B: datas[i].boptionList.length !== 0 ? datas[i].boptionList[1].optionContent : '',
                C: datas[i].boptionList.length !== 0 ? datas[i].boptionList[2].optionContent : '',
                D: datas[i].boptionList.length !== 0 ? datas[i].boptionList[3].optionContent : '',
              },
            },
          );
        }
      });
    },
    getOutList2() {
      const param = new URLSearchParams();
      param.append('examId', this.$route.query.dbId);
      param.append('title', this.queNameOut);
      param.append('type', this.queTypeOut);
      param.append('level', this.queDiffOut);
      api.queryOutBQuestions2(param).then(async (res) => {
        this.unadd = [];
        const datas = res.data.data;
        for (let i = 0; i < datas.length; i += 1) {
          this.unadd.push(
            {
              id: datas[i].businessId,
              name: datas[i].title,
              desc: datas[i].description,
              queType: datas[i].type,
              queAns: datas[i].answer,
              options: {
                A: datas[i].boptionList.length !== 0 ? datas[i].boptionList[0].optionContent : '',
                B: datas[i].boptionList.length !== 0 ? datas[i].boptionList[1].optionContent : '',
                C: datas[i].boptionList.length !== 0 ? datas[i].boptionList[2].optionContent : '',
                D: datas[i].boptionList.length !== 0 ? datas[i].boptionList[3].optionContent : '',
              },
            },
          );
        }
      });
    },
  },
  mounted() {
    if (this.$route.query.examId) {
      this.getInList();
      this.getOutList();
    } else {
      this.getInList2();
      this.getOutList2();
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost',
      };
    },
  },
  components: {
    draggable,
    Select,
    Option,
  },
};
</script>
<style lang="less">
@import url(../../../static/style/site.vars.less);
.questionAssign {
  width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  &>main {
    margin-top: 10px;
    width: 100%;
    height: 70vh;
    display: flex;
    .left, .right {
      width: 100%;
      height: 100%;
      background: rgba(189, 189, 189, 0.185);
      padding-top: 50px;
      position: relative;
      .table-header {
        position: absolute;
        top: 0;
        input {
          width: 115px;
          height: 30px !important;
        }
        .search-bar {
          justify-content: flex-end;
          .btn {
            height: 30px;
          }
        }
      }
      main {
        height: 100%;
        .list-group {
          list-style: none;
          width: 100%;
          height: 100%;
          &>span {
            height: 100%;
            width: 100%;
            display: block;
          }
          .list-group-item {
            // transition: all .1s ease;
            // opacity: 0.9;
            padding: 20px;
            padding-left: 50px;
            background: #fff;
            cursor: default;
            position: relative;
            .handle {
              left: 20px;
              top: 23px;
              position: absolute;
              display: block;
              width: 18px;
              height: 18px;
              background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M0 7.5v5h50v-5H0zm0 15v5h50v-5H0zm0 15v5h50v-5H0z" color="%23000"/></svg>');
              background-size: contain;
              background-repeat: no-repeat;
              opacity: .25;
              margin-right: 20px;
              cursor: move;
            }
            &>a {
              color: @site-main;
              cursor: pointer;
              user-select: none;
              font-weight: 700;
              margin: 0 3px;
              float: right;
              font-size: 12px;
              &:hover {
                color: rgba(0, 98, 211, 0.664);
              }
              &:active {
                color: rgb(0, 86, 185);
              }
            }
            .middle-container {
              position: absolute;
              left: 40px;
              padding: 10px 20px;
              text-align: left;
              display: flex;
              z-index: 100;
              justify-content: flex-start;
              background: #fff;
              box-shadow: 0 3px 6px rgba(6,0,1,.05);
              min-width: 600px;
              .box {
                // width: 30%;
                margin-right: 30px;
                padding: 10px;
              }
              p {
                margin: 10px 0;
              }
              .title, .que-title {
                font-size: 16px;
                font-weight: 600;
                margin-right: 10px;
                position: relative;
                user-select: none;
              }
              .title::before {
                content: "";
                position: absolute;
                width: 3px;
                height: 15px;
                border-radius: 10px;
                background-color: @site-main;
                left: -10px;
                top: 3.5px;
              }
              .que-container {
                // margin-top: 20px;
                .row {
                  margin: 10px 0;
                  padding-left: 14px;
                  font-size: 0;
                  display: flex;
                  justify-content: flex-start;
                  align-items: flex-start;
                  .option-container {
                    display: inline-block;
                    font-size: 14px;
                    margin-right: 25px;
                    min-width: 50%;
                    position: relative;
                    word-wrap: break-word;
                    &::before {
                      position: absolute;
                      color: @site-main;
                      left: -17px;
                      top: 2px;
                      font-size: 16px;
                      font-weight: 600;
                    }
                    &.A::before {
                      content: "A";
                    }
                    &.B::before {
                      content: "B";
                    }
                    &.C::before {
                      content: "C";
                    }
                    &.D::before {
                      content: "D";
                    }
                  }
                }
              }
              &.show {
                display: flex;
                z-index: 100;
              }
            }
          }
        }
      }

    }
    .left {
      border-right: 1px solid rgba(190, 190, 190, 0.5);
    }
    .right {
    }
  }
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to {
    transform: translateY(-10px);
    opacity: 0;
  }

  .flip-list-enter-active, .flip-list-enter-active {
    transition: all .5s !important;
  }
  .ghost {
    opacity: 0.5;
    background: #c8ebfb;
  }
}
</style>

